<template>
  <el-container>
    <el-header :style="{backgroundColor:theme.bgcolor}" class="myheader"><mainheader/></el-header>
    <el-container class="mycontent">
    <el-aside :style="{backgroundColor:theme.asideBgcolor,width:'250px',overflow:'hidden',height:'900px'}"><mainaside style="overflow:auto;height:900px;width:267px"/></el-aside>
    <el-main><router-view/></el-main>
    </el-container>
  </el-container>
</template>

<script>
  import mainaside from './mainframe/mainaside.vue'
  import mainheader from './mainframe/mainheader.vue'
  import {mapActions} from 'vuex';
  import {mapState,mapGetters} from 'vuex';

 export default {
   data(){
     return {

     }
   },
   components: {
     mainheader,mainaside
   },
   computed:{
     ...mapState( {
       theme: state => state.app.theme
     }),
     ...mapGetters([

       // ...
     ])
   },
   created(){
     this.init();
   },
   methods:{
     init () {
       this.getThemeData();
       this.getGameListData();
       this.kpi_getTableData();
     },
     ...mapActions([
       'getGameListData',
       'getUserMenuList',
       'getThemeData',
       'kpi_getTableData'
     ]),
   }
 }
</script>
<style scoped>
  .myheader {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
  }
  .mycontent {
    position: fixed;
    width: 100%;
    height: 95%;
    top: 60px;

  }

</style>
